import React from 'react';
import {connect} from 'dva';
import Link from 'umi/link';
import {Pagination} from 'antd';
import {PAGE_NUM, TRANSACTIONS_PAGE_SIZE} from '@/constants'
import style from './index.less';

function Transactions({hash, dispatch, list, loading, total, page: current}) {

  function pageChangeHandler(page, pageSize) {
    dispatch({
      type: 'transactions/fetch',
      payload: {hashOrHeight: hash, page: page, size: pageSize}
    });
  }

  function pageSizeChangeHandler(current, size) {
    dispatch({
      type: 'transactions/fetch',
      payload: {hashOrHeight: hash, page: PAGE_NUM, size: size}
    })
  }

  const transactions = list.map ? list.map((tx, index) => {
    let backgroundColor = tx.type === '转账' ? 'yellow' : tx.type === '存证' ? 'red' : 'green';
    return (
      <div className={`${style['transaction']} ${style[backgroundColor]}`} key={index}>
        <div className={style.type}>
          <span>{tx.type}</span>
        </div>
        <div className={style.detail}>
          <div className={style.upper}>
            <div className={style.hash}>
              <span><Link to={`/transaction/${tx.hash}`}>{tx.hash}</Link></span>
            </div>
            <div className={style.other}>
              <div>
                <span>{tx.outputTime}</span>
              </div>
              {
                tx.name ? (
                  <div>
                    <span>{tx.name}</span>
                  </div>
                ) : null
              }
              {
                tx.type === '转账' ? (
                  <div>
                    <span>{tx.amount}</span>
                  </div>
                ) : null
              }
              {
                tx.type === '存证' ? (
                  <div>
                    <span>{tx.dataSize} Bytes</span>
                  </div>
                ) : null
              }
            </div>
          </div>
          {
            tx.type === '转账' ? (
              <div className={style.lower}>
                <div>
                  <span>{tx.from.address}</span>
                  {
                    tx.from.known ? (
                      <span className={style.block_txs_known}>
                                                <img src={tx.from.logoUrl}
                                                     alt={tx.from.address}
                                                     height='12px'
                                                     width='12px'/>{' ' + tx.from.name}
                                            </span>
                    ) : null
                  }
                </div>
                <div>
                  <span>{tx.to.address}</span>
                  {
                    tx.to.known ? (
                      <span className={style.block_txs_known}>
                                                <img src={tx.to.logoUrl}
                                                     alt={tx.to.address}
                                                     height='12px'
                                                     width='12px'/>{' ' + tx.to.name}
                                            </span>
                    ) : null
                  }
                </div>
              </div>
            ) : null
          }
          {
            tx.type === '发币' ? (
              <div className={style.lower}>
                <div>
                  <span>{tx.from.address}</span>
                  {
                    tx.from.known ? (
                      <span className={style.block_txs_known}>
                                                <img src={tx.from.logoUrl}
                                                     alt={tx.from.address}
                                                     height='12px'
                                                     width='12px'/>{' ' + tx.from.name}
                                            </span>
                    ) : null
                  }
                </div>
                <div>
                  <span className={style.spo_amount}>{tx.amount}</span>
                  <span className={style.spo_name}>{tx.name}</span>
                  <span className={style.spo_detail}>{(tx.enableSpo ? tx.enableSpo : null)}</span>
                </div>
              </div>
            ) : null
          }
        </div>
      </div>
    );
  }) : null;

  return (
    <div className={style.normal}>
      <div className={style.title}>
        <span>交易信息</span>
      </div>
      <div className={style.list}>
        {transactions}
      </div>
      <div className={style.pagination}>
        <Pagination
          showSizeChanger
          showQuickJumper
          total={total}
          current={current}
          defaultPageSize={TRANSACTIONS_PAGE_SIZE}
          onChange={pageChangeHandler}
          onShowSizeChange={pageSizeChangeHandler}
          showTotal={total => `Total ${total ? total: 0} items`}
        />
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  const {list, total, page} = state.transactions;
  return {
    loading: state.loading.models.transactions,
    list,
    total,
    page,
  };
}

export default connect(mapStateToProps)(Transactions);
